<template>
  <t-dialog :header="getHeader()" :visible.sync="visible" :onClose="closeDialog" :closeOnOverlayClick="false"
    :onConfirm="onClick" width="40%" top="5%">
    <div style="height: 40vh; width: 100%; display: flex">
      <template v-if="title === 'materials'">
        <t-form :data="formData" labelWidth="100px" style="margin: auto;width: 100%;">
          <t-form-item label="学习资料id" name="materialsId">
            {{ row.materialsId }}
          </t-form-item>
          <t-form-item label="学习开始时间" name="startTime">
            {{ row.startTime }}
          </t-form-item>
          <t-form-item label="学习结束时间" name="endTime">
            {{ row.endTime }}
          </t-form-item>
          <t-form-item label="学习总结" name="summary">
            {{ row.summary }}
          </t-form-item>
          <t-form-item label="附件" name="sysAttMainVo">
            <file-upload v-model="formData.sysAttMainVo.sysAttMainIds" :moduleKey="formData.moduleKey"
              :fileList="formData.fileLists" :multiple="true" disabled>
              <t-button disabled variant="outline">
                <t-icon name="cloud-upload" slot="icon" />
                点击上传
              </t-button>
            </file-upload>
          </t-form-item>
        </t-form>
      </template>
      <template v-if="title === 'plan'">

        <t-form :data="formData" labelWidth="140px" style="margin: auto;width: 100%;">
          <t-form-item label="计划名称：" name="planName">
            {{ row.planName }}
          </t-form-item>
          <t-form-item label="计划日期：" name="planDate">
            {{ row.planDate }}
          </t-form-item>
          <t-form-item label="地点：" name="planPlace">
            {{ row.planPlace }}
          </t-form-item>
          <t-form-item label="内容：" name="planContent">
            {{ row.planContent }}
          </t-form-item>
          <t-form-item label="附件：" name="sysAttMainVo">
            <template v-if="formData.fileLists.length > 0">
              <div v-for="(item, index) in formData.fileLists" :key="index">
                <a class="t-button-link" target="_blank" :href="item.url">
                  {{ item.name }}
                </a>
              </div>
            </template>
            <div v-else>无</div>
          </t-form-item>
        </t-form>
      </template>
      <template v-if="title === 'record'">


        <t-form :data="formData" labelWidth="140px" style="margin: auto;width: 100%">
          <t-form-item label="资料名称：" name="materialsName">
            {{ row.materialsName }}
          </t-form-item>
          <t-form-item label="专家名称：" name="userName">
            {{ row.userName }}
          </t-form-item>
          <t-form-item label="学习开始时间：" name="startTime">
            {{ row.startTime }}
          </t-form-item>
          <t-form-item label="学习结束时间：" name="endTime">
            {{ row.endTime }}
          </t-form-item>
          <t-form-item label="学习总结：" name="summary">
            {{ row.summary }}
          </t-form-item>
          <t-form-item label="附件：" name="sysAttMainVo">
            <template v-if="formData.fileLists.length > 0">
              <div v-for="(item, index) in formData.fileLists" :key="index">
                <a class="t-button-link" target="_blank" :href="item.url">
                  {{ item.name }}
                </a>
              </div>
            </template>
            <div v-else>无</div>
          </t-form-item>
        </t-form></template>
      <template v-if="title === 'error'"> 出错了，请联系管理员 </template>
    </div>
  </t-dialog>
</template>

<script>
import FileUpload from '@/components/FileUpload/index.vue';
import { getFiles } from '@/api/common';

export default {
  components: {
    FileUpload,
  },
  dicts: ['materials_format'],
  props: {
    objId: [String, Number],
    header: String,
    row: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: 'error',
    },
  },
  data () {
    return {
      visible: true,
      formData: {
        summary: '',
        endTime: '',
        moduleKey: 'zjkxxjl',
        startTime: '',
        materialsId: '',
        fileLists: [],
        sysAttMainVo: {
          sysAttMainIds: '',
        },
      },
    };
  },
  created () {
    if (this.row) {
      getFiles(this.row.id)
        .then((res) => {
          res.data.forEach((item) => {
            this.formData.fileLists.push({
              name: item.fileName,
              url: item.fullFilePath,
              id: item.id,
              filePath: item.filePath,
            });
          });
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    }
  },
  methods: {
    getHeader () {
      let front = '';
      let name = '';
      if (this.title === 'materials') {
        front = '学习资料详情';
        name = this.row.materialsName;
      } else if (this.title === 'plan') {
        front = '学习计划详情';
        name = this.row.planName;
      } else if (this.title === 'record') {
        front = '学习记录详情';
        name = this.row.materialsName;
      }
      return `${front}-${name}`;
    },
    closeDialog () {
      this.$emit('update:visible', false);
    },
    onClick () {
      console.log('submit');
      this.closeDialog();
      return
      if (this.row) {
        this.$api.zjk.learning
          .updateLearningRecord({ ...this.formData, id: this.row.id })
          .then((res) => {
            console.log(res);
            this.closeDialog();
            this.$message.success('编辑成功');
            this.$emit('reload');
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      } else {
        this.$api.zjk.learning
          .addLearningRecord(this.formData)
          .then((res) => {
            console.log(res);
            this.closeDialog();
            this.$message.success('新增成功');
            this.$emit('reload');
          })
          .catch((e) => {
            this.$message.error(e.toString());
          });
      }
    },
  },
};
</script>
